<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <title>facebox创视</title>
</head>
<body style="font-size: 12px;">
<form id="form">
    <table align="center" border="1" style="width: 600px;">
        <tr>
            <td colspan="5" align="center">facebox创视-人证核验终端接口测试v0.0.3</td>
        </tr>
        <tr>
            <td colspan="2" rowspan="6" align="center">
                <img id="photo2" height="120"/>
            </td>
            <td rowspan="5" align="center">
                <img id="photo1" width="51" height="63"/>
                <input type="hidden" id="photo" name="photo"/>
                <input type="file" id="file" accept=".jpg,.png" style="display: none;"/>
            </td>
            <td colspan="2">姓名：<input type="text" id="name" name="name" size="15" placeholder="金阳"/></td>
        </tr>
        <tr>
            <td>性别：<select id="sex" name="sex">
                <option value="1">男</option>
                <option value="2">女</option>
            </select></td>
            <td>民族：<select id="nation" name="nation">
                <option value="01">汉族</option>
            </select></td>
        </tr>
        <tr>
            <td colspan="2">出生：<input type="text" id="birthday" name="birthday" size="8" placeholder="19801027"/></td>
        </tr>
        <tr>
            <td colspan="2">签发机关：<input type="text" id="department" name="department" size="15" placeholder="北京市公安局西城分局"/></td>
        </tr>
        <tr>
            <td colspan="2">有效期限：<input type="text" id="start_date" name="start_date" size="8" placeholder="20180901"/> - <input type="text" id="end_date" name="end_date" size="8" placeholder="20230831"/></td>
        </tr>
        <tr>
            <td colspan="3">住址：<input type="text" id="address" name="address" size="35" placeholder="北京市西城区复兴门外大街999号院11号楼3单元502室"/></td>
        </tr>
        <tr>
            <td>比分：<input type="text" id="face_score" size="4" placeholder="0.90"/></td>
            <td>阈值：<input type="text" id="face_limit" size="4" placeholder="0.80"/></td>
            <td colspan="3">公民身份号码：<input type="text" id="id_code" name="id_code" size="18" placeholder="110102198010272321"/></td>
        </tr>
        <tr>
            <td colspan="2">人证核验终端ID：<input type="text" id="id" name="id" size="12"/></td>
            <td colspan="3">人证核验终端IP：<input type="text" id="ip" value="127.0.0.1" size="15"/>:<input type="text" id="port" value="9526" size="4"/></td>
        </tr>
        <tr>
            <td colspan="5" align="center">
                <textarea id="result" rows="5" style="width: 98%;"></textarea>
            </td>
        </tr>
        <tr>
            <td colspan="5" align="center">
                <input type="button" id="IDCardReaderAndCompare" value="读取身份证信息并执行比对" style="font-size: 12px;"/>
                <input type="button" id="IDCardWriterAndCompare" value="输入身份证信息并执行比对" style="font-size: 12px;"/>
                <input type="button" id="GetOneFrameCameraVideo" value="获取一帧摄像头视频" style="font-size: 12px;"/>
                <input type="button" id="GetScanCode" value="获取扫码结果" style="font-size: 12px;"/>
            </td>
        </tr>
    </table>
</form>
<script src="weui/zepto.min.js"></script>
<script type="text/javascript">
    const ajax = {
        beforeSend: function () {
            $('#IDCardReaderAndCompare').attr('disabled', 'disabled');
            $('#IDCardWriterAndCompare').attr('disabled', 'disabled');
            $('#GetOneFrameCameraVideo').attr('disabled', 'disabled');
            $('#GetScanCode').attr('disabled', 'disabled');
            localStorage.setItem('ip', $('#ip').val());
            localStorage.setItem('port', $('#port').val());
        },
        complete: function () {
            $('#IDCardReaderAndCompare').removeAttr('disabled');
            $('#IDCardWriterAndCompare').removeAttr('disabled');
            $('#GetOneFrameCameraVideo').removeAttr('disabled');
            $('#GetScanCode').removeAttr('disabled');
        },
        error: function (e, code) {
            alert('请求异常，请重试！(' + code + ')');
        },
        success: function (result) {
            $('#result').val(JSON.stringify(result));
            if (result) {
                $('#id').val(result.id);
                $('#name').val(result.name);
                $('#sex').val(result.sex);
                $('#nation').val(result.nation);
                $('#birthday').val(result.birthday);
                $('#department').val(result.department);
                $('#start_date').val(result.start_date);
                $('#end_date').val(result.end_date);
                $('#address').val(result.address);
                $('#id_code').val(result.id_code);
                $('#photo').val(result.photo);
                $('#photo1').attr('src', ajax.base64(result.photo));
                if (result.face_compare) {
                    const image = new Image();
                    image.src = ajax.base64(result.face_compare.photo);
                    image.onload = function () {
                        const canvas = document.createElement('canvas');
                        canvas.width = this.width;
                        canvas.height = this.height;
                        const ctx = canvas.getContext('2d');
                        ctx.drawImage(this, 0, 0, this.width, this.height);
                        ctx.strokeStyle = 'green';
                        ctx.lineWidth = 10;
                        $.each(result.face_compare.face_delection.face_positions, function () {
                            ctx.strokeRect(this.x, this.y, this.width, this.heigth);
                        });
                        $('#photo2').attr('src', canvas.toDataURL());
                    }
                    $('#face_score').val(result.face_compare.face_score);
                    $('#face_limit').val(result.face_compare.face_limit);
                }
            }
        },
        base64: function (data) {
            return 'data:image/png;base64,' + data;
        }
    };
    $('#photo1').on('click', function () {
        return $('#file').click();
    });
    $('#file').on('change', function () {
        try {
            const reader = new FileReader();
            reader.readAsDataURL(document.getElementById('file').files[0]);
            reader.onload = function (e) {
                const image = new Image();
                image.src = e.target.result;
                image.onload = function () {
                    const canvas = document.createElement('canvas');
                    canvas.width = this.width;
                    canvas.height = this.height;
                    const ctx = canvas.getContext('2d');
                    ctx.drawImage(this, 0, 0, this.width, this.height);
                    const dataURL = canvas.toDataURL();
                    $('#photo').val(dataURL.split(',')[1]);
                    $('#photo1').attr('src', dataURL);
                }
            }
        } catch (e) {
            alert('处理照片失败！(' + e + ')');
        }
    });
    $('#IDCardReaderAndCompare').on('click', function () {
        $.ajax({
            type: 'GET',
            url: 'http://' + $('#ip').val() + ':' + $('#port').val() + '/ifacebox/IDCardReaderAndCompare',
            beforeSend: ajax.beforeSend,
            success: ajax.success,
            error: ajax.error,
            complete: ajax.complete
        });
    });
    $('#IDCardWriterAndCompare').on('click', function () {
        if ($('#photo').val() === '') {
            alert('请选择照片！');
            $('#file').click();
            return;
        }
        const fields = $('#form').serializeArray();
        const obj = {};
        $.each(fields, function (index, field) {
            obj[field.name] = field.value;
        });
        $.ajax({
            type: 'POST',
            url: 'http://' + $('#ip').val() + ':' + $('#port').val() + '/ifacebox/IDCardWriterAndCompare',
            data: JSON.stringify(obj),
            beforeSend: ajax.beforeSend,
            success: ajax.success,
            error: ajax.error,
            complete: ajax.complete
        });
    });
    $('#GetOneFrameCameraVideo').on('click', function () {
        $.ajax({
            type: 'GET',
            url: 'http://' + $('#ip').val() + ':' + $('#port').val() + '/ifacebox/GetOneFrameCameraVideo',
            beforeSend: ajax.beforeSend,
            success: function (result) {
                $('#result').val(JSON.stringify(result));
                if (result) {
                    const image = new Image();
                    image.src = ajax.base64(result.photo);
                    image.onload = function () {
                        const canvas = document.createElement('canvas');
                        canvas.width = this.width;
                        canvas.height = this.height;
                        const ctx = canvas.getContext('2d');
                        ctx.drawImage(this, 0, 0, this.width, this.height);
                        $('#photo2').attr('src', canvas.toDataURL());
                    }
                }
            },
            error: ajax.error,
            complete: ajax.complete
        });
    });
    $('#GetScanCode').on('click', function () {
        $.ajax({
            type: 'GET',
            url: 'http://' + $('#ip').val() + ':' + $('#port').val() + '/ifacebox/GetScanCode',
            beforeSend: ajax.beforeSend,
            success: function (result) {
                $('#result').val(JSON.stringify(result));
                if (result) {
                    alert(result.text);
                }
            },
            error: ajax.error,
            complete: ajax.complete
        });
    });
    $('#ip').val(localStorage.getItem('ip') || '127.0.0.1');
    $('#port').val(localStorage.getItem('port') || '9526');
</script>
</body>
</html>